(async () => {

    document.documentElement.style.fontSize = (document.body.clientWidth / 750) + 'px'

    let brands = await fetch('http://localhost:3001/brands');
    let brandsData = await brands.json();

    // 获取元素
    let titlesText = document.querySelector('.brands');


    // 遍历数据，创建元素并添加到页面
    for (let i = 0; i < brandsData.length; i++) {
        let title = document.createElement('div');
        let titleData = brandsData[i];
        let img1 = document.createElement('img');
        img1.src = 'http://localhost:3001' + brandsData[i].img;
        let img2 = document.createElement('img');
        img2.src = 'http://localhost:3001' + brandsData[i].banner;

        // 已获取数据加入缓存
        let titleDatas = [];
        titleDatas.push(titleData);

        // 构建内容
        title.className = 'brand';
        title.innerHTML = `
        <div class="IKEA">
            <img src="${img1.src}" class="logo" style="width: 120rem;height: 120rem;border-radius: 20rem 20rem 20rem 20rem;">
            <div class="name">${titleData.name}</div>
            <a href="${titleData.url}" style="display:block;"class="input">
                <div>进入品牌专场<img src="images/联合 1@2x.png" class="input_img"></div>
            </a>
        </div>
        <img src="${img2.src}" class="advertisement" style="width: 711rem;height: 244rem;border-radius: 20rem 20rem 20rem 20rem;">
        `;
        titlesText.appendChild(title);
    }

})()

